import React from "react";
import {FbInfo} from "@/api/web/FileBucketApi.ts";
import {createStyles} from "antd-style";
import FileApi from "@/api/web/FileApi.ts";
import {getFileName} from "@/utils/Util.ts";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;
            
            .img-content {
                position: relative;

                .img-label {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                    background-color: ${token.colorBgContainer}4f;
                    line-height: 1;
                    padding: 8px;
                }

                .img-item {
                    display: block;
                    width: 100%;
                    padding: 0;
                    margin: 0;
                    z-index: 0;
                    object-fit: contain;
                }
            }
        `,
    }
})

interface Props {
    fbInfo: FbInfo
    pathList: string[]
}

const ImageBucket: React.FC<Props> = ({fbInfo, pathList}) => {
    const styles = useStyles().styles

    return (
        <div className={styles.container}>
            {pathList.map(path => {
                return (
                    <div
                        className="img-content"
                        key={path}
                    >
                        <p
                            className="img-label"
                        >
                            {getFileName(path)}
                        </p>
                        <img
                            loading="lazy"
                            src={FileApi.getFileLink(path)}
                            className="img-item"
                            alt={"图片"}
                        />
                    </div>
                )
            })}
        </div>
    )
}

export default ImageBucket
